<template>
    <div>
        <video id="v1" autoplay loop muted  poster="https://cdn.quasar.dev/img/polina.jpg" >
            <source type="video/webm" src="https://cdn.quasar.dev/img/polina.webm">
            <source src="https://cdn.quasar.dev/img/polina.mp4" type="video/mp4"/>
        </video>
        <p class="text-white jimText">J-IM</p>
        <q-card flat class="login-card">
            <div><h6>登录</h6></div>
            <q-form @submit="onSubmit" class="q-gutter-md">
                <q-input clearable v-model="name" label="账号 *" lazy-rules :rules="[ val => val && val.length > 0 ||
                '请输入账号']"
                >
                    <template v-slot:before>
                        <q-icon name="person"/>
                    </template>
                </q-input>

                <q-input type="password" v-model="pwd" clearable label="密码 *" lazy-rules
                         :rules="[ val => val && val.length > 0 || '请输入密码']"
                >
                    <template v-slot:before>
                        <q-icon name="font_download"/>
                    </template>
                </q-input>

                <div>
                    <q-btn style="width: 200px;margin-top: 50px" label="Login" type="submit" color="green"/>
                </div>
            </q-form>
        </q-card>
    </div>
</template>

<script>
  // import Vue from 'vue'
  import JIM from '../../utils/JIM'
  export default {
    name: 'WhatsappLayout',
    data () {
      return {
        name: "",
        pwd: "",
      }
    },
    methods: {
      onSubmit () {
        this.fetchData()
        window.location.href = '#/chat'
      },
      fetchData () {
        JIM.open(this.name, this.pwd)
      },

    },
    computed: {
    },
    created () {
      let imLoginInfo = localStorage.getItem('imLoginInfo');
      if (!imLoginInfo) {
        JIM.open(new Date().getMilliseconds(), '123456')
      }
      window.location.href = '#/chat'
    }
  }
</script>

<style scoped>
    * {
        margin: 0px;
        padding: 0px;
    }
    video {
        position: fixed;
        right: 0px;
        bottom: 0px;
        min-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
        /*加滤镜*/

        z-index: -888
    }

    source {
        min-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
    }

    .jimText {
        z-index: 1;
        font-size: 250px;
        position: absolute;
        left: 3%;
        top: 20%;
    }

    .login-card {
        top: 30%;
        left: 70%;
        padding: 20px;
        width: 320px;
        z-index: 1;
        position: absolute;
        /*filter: blur(15px); //背景模糊设置 */
        /*-webkit-filter: grayscale(100%);*/
        /*filter:grayscale(100%); //背景灰度设置*/
    }

</style>
